<!DOCTYPE HTML>
<html>
    <head>
    <script src="jquery-1.4.4.js"> </script>
    </head>
    <style>
#container{
    width:100%;
    height:100px;
    border-radius:10px;
    background-color:#151C24;
    text-align:center;
    font-size:14px;
    padding-top:20px;
    color:#9CA68F;
}

    </style>

<script>
function log(msg){
    console.log(msg);
}

$(function(){
        var dropContainer = document.getElementById("container");
        log('setUp');
        dropContainer.addEventListener("drop",dropHandler,false);
        dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
        dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
        dropContainer.addEventListener("drop", dropHandler, false);
});
    function dropHandler(event){
        var files = event.dataTransfer.files;
        log(files);
        var count = files.length;
        form = new FormData();
        for(var i= 0;i<count;i++){
             form.append("file"+i, files[i]);
            }
        sendData(form);
        }
    function sendData(form){
        var xhr = new XMLHttpRequest();  
        xhr.upload.addEventListener("progress", uploadProgress, false);  
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);  
        xhr.open("POST", "/upload.php");
        xhr.send(form);
        var progressBar = document.getElementById('progressBar');
        progressBar.style.display = 'block';
        progressBar.style.width = '0px';
        
        }

    function reqComplete(event){
         var result = document.getElementById('body');
         result.innerHTML = event.target.responseText;
         $(".inner a[rel]").overlay({effect: 'apple',mask: '#0F0407'});
         $('.dragout').dragout();
        }
    function uploadComplete(event){
        document.getElementById('per').innerHTML="";
        window.location.href = 'mark.html';
        //getResult();
         //$.jGrowl('<font  face="Microsoft YaHei">上传成功!</font>');
        }
    function uploadFailed(event){
        $.jGrowl('<font  face="Microsoft YaHei">上传失败!</font>');
        }
    function uploadProgress(event){
                 
            
        var percentComplete;
         if(event.lengthComputable){
             percentComplete = Math.round(event.loaded * 100 / event.total);
             }
              document.getElementById('progressBar').style.width = (percentComplete * 8.8).toString() + 'px';
             
          if(percentComplete==100){
              document.getElementById('progressBar').style.width = (0 * 8.8).toString() + 'px';
              
             
              }
          document.getElementById('per').innerHTML=percentComplete+"%";
        }

</script>


<!--<form target="/up" method="post" enctype="multipart/form-data" id="uploadform">-->
  <!--<input type="file" name="dragupload[]" multiple="multiple"-->
  <!--onchange="if (this.value) document.getElementById('uploadform').submit();" />-->
<!--</form>-->
<body>
    <div id="container">
          在这里你可以直接把桌面上的文件拖放到这里上传，你也可以按住每行前面小图标把文件（当然这是保存在服务器的）从浏览器拖放到桌面
      <div id="progressBar"></div>
      <div id="per"></div>
      <div id="about"><a href="http://ez-blog.appspot.com">我的博客</a></div>
    </div>

</body>
</html>

